<%--
  Created by IntelliJ IDEA.
  User: 刘松
  Date: 2020/5/4
  Time: 14:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<%
	Long datetime = new Date().getTime(); // 获取系统时间
%>
<!DOCTYPE html>
<html>
	<head>
		<title>制度分类</title>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		
		<link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
		<link rel="stylesheet" href="/lib/layui/layui/css/eleTree.css">
		
		<script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="/js/base/base.js"></script>
		<script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>
		<script type="text/javascript" src="/lib/layui/layui/global.js?<%=datetime%>"></script>
		
		<style>
			html, body {
				width: 100%;
				height: 100%;
				background: #fff;
				user-select: none;
			}
			
			/*伪元素是行内元素 正常浏览器清除浮动方法*/
			.clearfix:after {
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			
			.clearfix {
				*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
			}
			
			.container {
				position: relative;
				width: 100%;
				height: 100%;
			}
			
			.project_tree_module {
				float: left;
				width: 250px;
				min-height: 50px;
				box-sizing: border-box;
				overflow: hidden;
				box-shadow: 0 0px 5px 0 #e7e7e7;
				border-radius: 3px;
				margin-right: 10px;
			}
			
			.project_info {
				float: left;
				width: calc(100% - 270px);
				box-shadow: 0 0px 5px 0 #e7e7e7;
				border-radius: 3px;
			}
			
			.layui-form-label {
				width: 130px;
			}
			
			.layui-input-block {
				margin-left: 170px;
				display: -webkit-box;
				/*width: 45%;*/
			}
			
			.layui-treeSelect {
				width: 100%;
			}
			
			#sort_title > div {
				margin-top: 60px;
				margin-bottom: 60px;
				display: flex;
				justify-content: space-around;
				flex-wrap: nowrap;
			}
			
			.layui-form-item {
				margin: 0 auto;
			}
			
			.layui-form-select {
				width: 100%;
			}
			
			.layui-select-disabled .layui-disabled {
				border: none;
				cursor: default !important;
				color: #222 !important;
			}
			
			.layui-select-disabled .layui-edge {
				display: none;
			}
			
			.tab_c {
				margin-left: 0% !important;
			}
			
			h1 {
				font-size: 10.5pt;
			}
			
			.left {
				margin-top: 10px;
				padding: 10px;
			}
			
			.layui-row {
				margin-top: 50px;
			}
			
			.layui-form-item {
				margin-bottom: 20px;
			}
			
			.layui-input {
				margin-right: 10px;
			}
			
			.require_item {
				color: red;
				margin-right: 2px;
				font-weight: bolder;
			}
		</style>
	
	</head>
	<body>
		<div class="container">
			<div class="header">
				<div class="headImg" style="padding-top: 10px">
					<span style="font-size:22px;margin-left:10px;color:#494d59;margin-top: 2px">
                        <img style="margin-left:1.5%" src="/img/commonTheme/theme6/icon_summary.png"/>
                        <span style="margin-left: 10px">分类设置</span>
                    </span>
				</div>
			</div>
			<hr/>
			<div class="layui-card-body left clearfix">
				<div id="projectTree" class="project_tree_module" style="height: 80%;">
					<div class="cont" id="client" style="height: 90%">
						<div class="cont_left" style="min-height: 400px;">
							<ul class="all_ul">
								<li style="padding-bottom: 7px;">
									<div class="layui-form">
										<select name="sortType" lay-verify="required" lay-filter="sortType">
										</select>
									</div>
								</li>
								<li style=" margin-left: 10px; margin-top: 10px; height: 100%; overflow-y: auto">
									<div class="tab_c list" lay-filter="projectData">
									
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="project_info">
					<div class="layui-card-body clearfix" style="height:80%;">
						<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							<div class="layui-tab-content">
								<div class="layui-tab-item layui-show">
									
									<%--标题--%>
									<div id="_title" style="height:25px;">
										<h2>
											<span id="title_s"></span>
											<span id="del" class="layui-btn layui-btn-normol" style="float: right; margin-right: 10px;">删除分类</span>
											<span id="newType" class="layui-btn layui-btn-normol" style="float: right; margin-right: 10px;">新建分类</span>
										</h2>
									</div>
									
									<form class="layui-form" lay-filter="pBagForm">
										<input type="hidden" name="sortId">
										
										<%--主体部分--%>
										<div class="layui-row">
											<div class="layui-col-xs6 layui-col-xs-offset2">
												<div class="layui-form-item">
													<label class="layui-form-label"><strong class="require_item">*</strong>制度类别</label>
													<div class="layui-input-block">
														<input type="text" name="sortName" placeholder="请输入" autocomplete="off" class="layui-input">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label"><strong class="require_item">*</strong>排序号</label>
													<div class="layui-input-block">
														<input type="text" name="sortNo" placeholder="请输入" autocomplete="off" class="layui-input number_input">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label"><strong class="require_item">*</strong>分类描述</label>
													<div class="layui-input-block">
														<input type="text" name="sortDesc" placeholder="请输入" autocomplete="off" class="layui-input">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label"><strong class="require_item">*</strong>分类可见范围</label>
													<div class="layui-input-block">
														<div id="viewScopeSelect" class="xm-select-demo" style="width: 100%;"></div>
													</div>
												</div>
												<div class="layui-form-item" id="belongtoDeptBox" style="display: none;">
													<label class="layui-form-label"><strong class="require_item">*</strong>分类所属部门</label>
													<div class="layui-input-block">
														<input type="text" id="belongtoDepts" readonly name="belongtoDepts" class="layui-input"
														       style="background-color: #e7e7e7;">
														<span class="choose_dept" style="color:#1687CB;cursor: pointer;" isSigle="0">添加</span>
														<span class="clear_dept" style="color:#1687CB;cursor: pointer;margin-left:5px;">清空</span>
													</div>
												</div>
												<%--												<div class="layui-form-item">--%>
												<%--													<label class="layui-form-label"><strong class="require_item">*</strong>选择上级分类</label>--%>
												<%--													<div class="layui-input-block">--%>
												<%--														<input type="text" id="selecttree" name="sortParent" placeholder="请输入" autocomplete="off"--%>
												<%--														       class="layui-input">--%>
												<%--													</div>--%>
												<%--												</div>--%>
												<%--                                                <div class="layui-form-item">--%>
												<%--													<label class="layui-form-label"><strong class="require_item">*</strong>分级类别</label>--%>
												<%--													<div class="layui-input-block">--%>
												<%--                                                        <select name="sortLevel">--%>
												<%--                                                            <option value="">请选择</option>--%>
												<%--                                                        </select>--%>
												<%--													</div>--%>
												<%--												</div>--%>
											</div>
											<%--											<div class="layui-col-xs6">--%>
											<%--												<div class="layui-form-item">--%>
											<%--													<label class="layui-form-label"><strong class="require_item">*</strong>分类所属部门</label>--%>
											<%--													<div class="layui-input-block">--%>
											<%--														<input type="text" id="belongtoDepts" readonly name="belongtoDepts" class="layui-input" style="background-color: #e7e7e7;">--%>
											<%--														<span class="choose_dept" style="color:#1687CB;cursor: pointer;" isSigle="0">添加</span>--%>
											<%--														<span class="clear_dept" style="color:#1687CB;cursor: pointer;margin-left:5px;">清空</span>--%>
											<%--													</div>--%>
											<%--												</div>--%>
											<%--												<div class="layui-form-item">--%>
											<%--													<label class="layui-form-label">制度文档查看部门</label>--%>
											<%--													<div class="layui-input-block">--%>
											<%--														<input type="text" id="viewDepts" name="viewDepts" readonly class="layui-input" style="background-color:#E7E7E7;">--%>
											<%--														<span class="choose_dept" style="color:#1687CB;cursor: pointer;" isSigle="0">添加</span>--%>
											<%--														<span class="clear_dept" style="color:#1687CB;cursor: pointer;margin-left:5px;">清空</span>--%>
											<%--													</div>--%>
											<%--												</div>--%>
											<%--												<div class="layui-form-item">--%>
											<%--													<label class="layui-form-label">制度文档查看角色</label>--%>
											<%--													<div class="layui-input-block">--%>
											<%--														<input type="text" id="viewPrivs" name="viewPrivs" readonly class="layui-input" style="background-color:#E7E7E7;">--%>
											<%--														<span class="choose_priv" style="color:#1687CB;cursor: pointer;" isSigle="0">添加</span>--%>
											<%--														<span class="clear_priv" style="color:#1687CB;cursor: pointer;margin-left:5px;">清空</span>--%>
											<%--													</div>--%>
											<%--												</div>--%>
											<%--												<div class="layui-form-item">--%>
											<%--													<label class="layui-form-label">制度文档查看人员</label>--%>
											<%--													<div class="layui-input-block">--%>
											<%--														<input type="text" id="viewUsers" name="viewUsers" readonly class="layui-input" style="background-color:#E7E7E7;">--%>
											<%--														<span class="choose_user" style="color:#1687CB;cursor: pointer;" isSigle="0">添加</span>--%>
											<%--														<span class="clear_user" style="color:#1687CB;cursor: pointer;margin-left:5px;">清空</span>--%>
											<%--													</div>--%>
											<%--												</div>--%>
											<%--                                                <div class="layui-form-item">--%>
											<%--													<label class="layui-form-label" style="width: 145px;padding: 9px 0;">制度文档查看人员类别</label>--%>
											<%--                                                    <div class="layui-input-block">--%>
											<%--	                                                    <div id="viewUserTypeSelect" class="xm-select-demo" style="width: 100%;"></div>--%>
											<%--													</div>--%>
											<%--												</div>--%>
											<%--											</div>--%>
										</div>
										<div id="sort_title" style="text-align: center; margin:0 auto; margin-top:20px;">
											<button type="button" lay-submit class="layui-btn" lay-filter="pBagSubmit">保存</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">

            var dept_id = '';
            var priv_id = '';
            var user_id = '';

            // 选择部门控件
            $('.choose_dept').click(function () {
                dept_id = $(this).siblings('input').attr('id');
                var sigle = $(this).attr('isSigle') == 1 ? '?0' : '';
                $.popWindow('/common/selectDept' + sigle);
            });
            // 清空部门
            $('.clear_dept').click(function () {
                var eleId = '#' + $(this).siblings('input').attr('id');
                $(eleId).val('');
                $(eleId).attr('deptid', '');
                $(eleId).attr('deptname', '');
            });

            // 选择角色控件
            $('.choose_priv').click(function () {
                priv_id = $(this).siblings('input').attr('id');
                var sigle = $(this).attr('isSigle') == 1 ? '?0' : '';
                $.popWindow('/common/selectPriv' + sigle);
            });
            // 清空角色
            $('.clear_priv').click(function () {
                var eleId = '#' + $(this).siblings('input').attr('id');
                $(eleId).val('');
                $(eleId).attr('privid', '');
                $(eleId).attr('userpriv', '');
            });

            // 选择用户控件
            $('.choose_user').click(function () {
                user_id = $(this).siblings('input').attr('id');
                var sigle = $(this).attr('isSigle') == 1 ? '?0' : '';
                $.popWindow('/common/selectUser' + sigle);
            });
            // 清空用户
            $('.clear_user').click(function () {
                var eleId = '#' + $(this).siblings('input').attr('id');
                $(eleId).val('');
                $(eleId).attr('user_id', '');
                $(eleId).attr('username', '');
                $(eleId).attr('dataid', '');
                $(eleId).attr('userprivname', '');
            });

            layui.use(['eleTree', 'layer', 'treeSelect', 'form', 'xmSelect'], function () {
                var eleTree = layui.eleTree,
                    layer = layui.layer,
                    treeSelect = layui.treeSelect,
                    form = layui.form,
                    xmSelect = layui.xmSelect;

                var el = null;

                loadLeftTree();

                // var viewUserTypeSelect = null;
                var viewScopeSelect = null;

                // 获取分类可见范围
                $.get('/code/getCode?parentNo=INSTITUTION_SORT_SEE', function (res) {
                    if (res.flag && res.obj.length > 0) {
                        viewScopeSelect = xmSelect.render({
                            el: '#viewScopeSelect',
                            toolbar: {
                                show: true,
                            },
	                        name: 'viewScope',
                            autoRow: true,
                            prop: {
                                name: 'codeName',
                                value: 'codeNo',
                            },
                            on: function (data) {
                                //arr:  当前多选已选中的数据
                                var currentArr = data.arr;
                                //change, 此次选择变化的数据,数组
                                var change = data.change;
                                //isAdd, 此次操作是新增还是删除
                                var isAdd = data.isAdd;
                                var flag = false;
                                if (currentArr.length > 0) {
                                    for (var i = 0; i < currentArr.length; i++) {
                                        if (currentArr[i].codeNo == '04') {
                                            flag = true;
                                            break;
                                        }
                                    }
                                }
                                if (flag) {
                                    $('#belongtoDeptBox').show();
                                } else {
                                    $('#belongtoDeptBox').hide();
                                }
                            },
                            data: res.obj
                        });
                    }
                    form.render();
                });

                // 获取分级类别接口
                $.get('/code/getCode?parentNo=INSTITUTION_SORT_LEVEL', function (res) {
                    var str = '';
                    if (res.flag && res.obj.length > 0) {
                        res.obj.forEach(function (item) {
                            str += '<option value="' + item.codeNo + '">' + item.codeName + '</option>';
                        });
                    }
                    // $('[name="sortLevel"]').append(str);
                    $('[name="sortType"]').append(str);
                    form.render('select');
                });

                // 获取人员类型接口
                // $.get('/code/getCode?parentNo=staffType', function(res){
                //     var data = [];
                //     if (res.flag && res.obj.length > 0) {
                //         data = res.obj;
                //     }
                //     viewUserTypeSelect = xmSelect.render({
                //         el: '#viewUserTypeSelect',
                //         toolbar: {
                //             show: true,
                //         },
                //         autoRow: true,
                //         prop: {
                //             name: 'codeName',
                //             value: 'codeNo',
                //         },
                //         data: data
                //     });
                // });

                // 新建分类(清空表单)
                $('#newType').click(function () {
                    //清空表单
                    form.val("pBagForm", {
                        "sortId": '',
                        "sortName": '',
                        "sortNo": '',
                        "sortDesc": '',
                        "belongtoDepts": '',
                        "viewDepts": '',
                        "viewPrivs": '',
                        "viewUsers": '',
                        "sortParent": '',
                        "sortLevel": '',
                        "viewUserType": ''
                    });

                    // 清空下拉树
                    var treeId = $('.layui-treeSelect-body').attr('id');
                    $('input[unselect="unselect"]').val('');
                    $('#' + treeId).find('a').removeClass('curSelectedNode');

                    //清空标题
                    $('#title_s').text('');

                    // 清空部门
                    $('.clear_dept').trigger('click');
                    // 清空角色
                    $('.clear_priv').trigger('click');
                    // 清空用户
                    $('.clear_user').trigger('click');

                    // 清空制度文档查看人员类别
                    // viewUserTypeSelect.setValue([]);
	                
	                // 清空分类可见范围
	                viewScopeSelect.setValue([]);

                    form.render();
                });

                // 删除分类
                $('#del').click(function () {
                    var sortId = $('input[name="sortId"]').val();
                    if (!sortId) {
                        layer.msg('请选择分类', {icon: 0, time: 1500});
                        return false;
                    }

                    $.get('/InstitutionSort/deleteSortId', {
                        sortId: sortId
                    }, function (res) {
                        if (res.flag) {
                            if (res.object == 1) {
                                layer.msg('无权限删除', {icon: 0, time: 1500});
                                return false;
                            } else if (res.object == 2) {
                                layer.msg('此分类下有制度，无法删除', {icon: 0, time: 1500});
                                return false;
                            } else if (res.object == 3) {
                                layer.msg('此分类下有子分类，无法删除', {icon: 0, time: 1500});
                                return false;
                            }
                            layer.msg('删除分类成功', {icon: 1, time: 1500}, function () {
                                el.remove(sortId);
                                //清空表单
                                $('#newType').trigger('click');
                            });
                        } else {
                            layer.msg('删除失败', {icon: 2, time: 1500});
                        }
                    });
                });

                // 下拉树
                // treeSelect.render({
                //     elem: '#selecttree',
                //     data: '/InstitutionSort/findSortDataTree',
                //     type: 'get',
                //     placeholder: '请选择', 
                //     search: true, 
                //     style: {
                //         folder: {enable: true},
                //         line: {enable: true}
                //     },
                //     click: function (d) {
                //         $('#tree').val(d.current.id);
                //         form.render();
                //     },
                //     success: function (d) {
                //         form.render();
                //     }
                // });

                // 树节点点击事件
                eleTree.on('nodeClick(projectData)', function (d) {
                    var data = d.data;
                    //当前节点数据
                    var currentData = data.currentData;
                    //父级数据
                    var parentData = data.parentData['data'];

                    //显示名称
                    $('#title_s').text(currentData.sortName);
					
                    // 指定可见部门
                    if (currentData.viewScope && currentData.viewScope.indexOf('04') > -1) {
                        $('#belongtoDeptBox').show();
                    } else {
                        $('#belongtoDeptBox').hide();
                    }

                    //赋值回显
                    form.val("pBagForm", {
                        "sortId": currentData.sortId,
                        "sortName": currentData.sortName,
                        "sortNo": currentData.sortNo,
                        "sortDesc": currentData.sortDesc,
                        "belongtoDepts": currentData.belongtoDeptsName,
                        "viewDepts": currentData.viewDeptsName || '',
                        // "viewPrivs": currentData.viewPrivsName,
                        // "viewUsers": currentData.viewUsersName,
                        // "sortLevel": currentData.sortLevel || ''
                    });

                    //回显下拉树
                    // var treeId = $('.layui-treeSelect-body').attr('id');
                    // treeSelect.checkNode('#selecttree', treeId, parentData.sortId);

                    // 分类所属部门
                    $('#belongtoDepts').attr("deptid", currentData.belongtoDepts || '');
                    // // 制度文档查看部门
                    // $('#viewDepts').attr("deptid", currentData.viewDepts);
                    // // 制度文档查看角色
                    // $('#viewPrivs').attr("userpriv", currentData.viewPrivs);
                    // // 制度文档查看人员
                    // $('#viewUsers').attr("user_id", currentData.viewUsers);

                    // 制度文档查看人员类别
                    // var viewUserTypeArr = (currentData.viewUserType || '').split(',');
                    // viewUserTypeSelect.setValue(viewUserTypeArr);
	                
	                // 分类可见范围
	                var viewScopeSelectArr = (currentData.viewScope || '').replace(/,$/, '').split(',');
	                viewScopeSelect.setValue(viewScopeSelectArr);

                });

                // 监听左侧下拉框部门选择
                form.on('select(sortType)', function (data) {
                    loadLeftTree(data.value);
                });

                //监听提交事件
                form.on('submit(pBagSubmit)', function (data) {
                    var obj = data.field;

                    for (var key in obj) {
                        if (obj[key]) {
                            obj[key] = obj[key].trim();
                        }
                    }

                    // 获取上级分类
                    // obj['sortParent'] = $('input[unselect="unselect"]').attr("treenodeid");
                    // if (obj['sortParent'] === undefined) {
                    //     obj['sortParent'] = '0';
                    // }

                    // 分类所属部门
                    obj['belongtoDepts'] = $('#belongtoDepts').attr('deptid') || '';
                    // 制度文档查看部门
                    // obj['viewDepts'] = $('#viewDepts').attr('deptid') || '';
                    // // 制度文档查看角色
                    // obj['viewPrivs'] = $('#viewPrivs').attr('userpriv') || '';
                    // // 制度文档查看人员
                    // obj['viewUsers'] = $('#viewUsers').attr('user_id') || '';
                    // // 制度文档查看人员类别
                    // obj['viewUserType'] = viewUserTypeSelect.getValue('valueStr');
	                // 分类可见范围
                    obj['viewScope'] = viewScopeSelect.getValue('valueStr');

                    // 判断制度类别
                    if (!obj.sortName) {
                        layer.msg("请填写制度类别", {icon: 0, time: 1500});
                        return false;
                    }

                    // 判断排序号
                    if (!obj.sortNo) {
                        layer.msg("请填写排序号", {icon: 0, time: 1500});
                        return false;
                    }

                    // 判断分类描述
                    if (!obj.sortDesc) {
                        layer.msg("请填写分类描述", {icon: 0, time: 1500});
                        return false;
                    }

                    // 判断分类可见范围
                    if (!obj.viewScope) {
                        layer.msg("请填选择分类可见范围", {icon: 0, time: 1500});
                        return false;
                    } else {
                        obj.viewScope += ',';
                    }

                    // 判断上级分类
                    // if (!obj.sortParent && obj.sortParent != '0') {
                    //     layer.msg("请选择上级分类", {icon: 0, time: 1500});
                    //     return false;
                    // }

                    // 判断分级类别
                    // if (!obj.sortLevel) {
                    //     layer.msg("请选择分级类别", {icon: 0, time: 1500});
                    //     return false;
                    // }

                    // 判断分类所属部门
                    if (obj.viewScope.indexOf('04') > -1) {
                        if (!obj.belongtoDepts) {
                            layer.msg("请选择分类所属部门", {icon: 0, time: 1500});
                            return false;
                        }
                    } else {
                        obj.belongtoDepts = '';
                    }

                    $.post('/InstitutionSort/editOrInsertSort', obj, function (res) {
                        if (res.flag) {
                            layer.msg('操作成功', {icon: 1, time: 1500}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg('操作失败', {icon: 2, time: 1500});
                        }
                    });

                    return false;
                });

                //监听键盘事件，只能输入数字
                $(document).on('keypress', '.number_input', function (e) {
                    var key = window.event ? e.keyCode : e.which;

                    if (!((key > 95 && key < 106) || (key > 47 && key < 58) || key == 8 || key == 9 || key == 13 || key == 37 || key == 39)) {
                        return false;
                    }
                });
                // 监听输入内容
                $(document).on('input propertychange', '.number_input', function () {
                    var value = $(this).val().replace(/[^\d]/g, '');
                    $(this).val(value);
                });

                //左侧树结构
                function loadLeftTree(sortType) {
                    sortType = sortType || '01';
                    el = null;
                    el = eleTree.render({
                        url: '/InstitutionSort/findSortFather?sortType=' + sortType,
                        elem: '.tab_c',
                        showCheckbox: false,
                        showLine: true,
                        accordion: true,
                        highlightCurrent: true,
                        request: { // 修改数据为组件需要的数据
                            name: "sortName", // 显示的内容
                            key: "sortId", // 节点id
                            parentId: 'sortParent', // 节点父id
                            isLeaf: "isLeaf",// 是否有子节点
                            children: 'children'
                        },
                        response: { // 修改响应数据为组件需要的数据
                            statusName: "flag",
                            statusCode: true,
                            dataName: "obj"
                        }
                    });
                }

            });
		
		</script>
	</body>
</html>
